<template>
  <el-dialog
    :title="isEdit ? '编辑品牌' : '新增品牌'"
    v-model="visible"
    width="600px"
    @close="handleClose"
    destroy-on-close
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="品牌名称" prop="brandName">
        <el-input v-model="form.brandName" placeholder="请输入品牌名称" />
      </el-form-item>

      <el-form-item label="品牌简介" prop="introduction">
        <el-input 
          v-model="form.introduction" 
          type="textarea" 
          placeholder="请输入品牌简介" 
          :rows="3"
        />
      </el-form-item>

      <el-form-item label="品牌Logo" prop="image">
        <el-input v-model="form.image" placeholder="请输入图片URL" />
      </el-form-item>

      <el-form-item label="品牌评分" prop="starLevel">
        <el-rate v-model="form.starLevel" :max="5" />
      </el-form-item>

      <el-form-item label="产品数量" prop="productCount">
        <el-input-number v-model="form.productCount" :min="0" style="width: 100%" />
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :value="1">启用</el-radio>
          <el-radio :value="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit">
          {{ isEdit ? '保存' : '添加' }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

const props = defineProps({
  visible: Boolean,
  isEdit: Boolean,
  brandData: Object,
  loading: Boolean
})

const emit = defineEmits(['update:visible', 'success'])

const visible = ref(props.visible)
const formRef = ref()

const form = reactive({
  id: null,
  brandName: '',
  introduction: '',
  image: '',
  starLevel: 0,
  productCount: 0,
  status: 1
})

const rules = reactive({
  brandName: [
    { required: true, message: '请输入品牌名称', trigger: 'blur' },
    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
})

// 同步 visible
watch(() => props.visible, (val) => {
  visible.value = val
})

watch(visible, (val) => {
  emit('update:visible', val)
  if (!val) {
    handleClose()
  }
})

// 回显数据
watch(() => props.brandData, (val) => {
  if (props.isEdit && val) {
    form.id = val.id
    form.brandName = val.brandName
    form.introduction = val.introduction || ''
    form.image = val.image || ''
    form.starLevel = val.starLevel || 0
    form.productCount = val.productCount || 0
    form.status = val.status
  } else {
    resetForm()
  }
}, { immediate: true, deep: true })

// 每次打开如果是新增模式，重置表单
watch(() => props.visible, (val) => {
  if (val && !props.isEdit) {
    resetForm()
  }
})

function resetForm() {
  form.id = null
  form.brandName = ''
  form.introduction = ''
  form.image = ''
  form.starLevel = 0
  form.productCount = 0
  form.status = 1
  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

const handleClose = () => {
  if (formRef.value) {
    formRef.value.clearValidate()
  }
  emit('update:visible', false)
}

const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid) => {
    if (valid) {
      emit('success', { ...form })
    }
  })
}
</script>

